// src/components/SvgIcon.vue
<script setup lang="ts">
import { computed } from 'vue';
export type sizeType = 'tiny' | 'subSmall' | 'small' | 'medium' |'default' | 'large'


// 参数
const props = withDefaults(defineProps<{
  //icon
  iconName?: string;
  color?: string;
  size?: sizeType
}>(), {
  size: "default"
});

const className = computed(() => {
  let name = 'svg-icon-default'
  switch (props.size) {
    case "tiny":
      name = 'svg-icon-tiny'
      break;
    case "subSmall":
      name = 'svg-icon-subSmall'
      break;
    case "small":
      name = 'svg-icon-small'
      break;
    case "default":
      name = 'svg-icon-default'
      break;
    case "medium":
      name = 'svg-icon-medium'
      break;
    case "large":
      name = 'svg-icon-large'
      break;
    default:
      name = 'svg-icon-default'
      break;
  }
  return name;
});



</script>

<template>
  <svg :class="className" aria-hidden="true">
    <use :xlink:href="iconName" :fill="color" />
  </svg>
</template>

<style scoped>
.svg-icon-tiny {
  width: 0.5em;
  height: 0.5em;
  position: relative;
  fill: currentColor;
  vertical-align: -2px;
}
.svg-icon-subSmall {
  width: 1em;
  height: 1em;
  position: relative;
  fill: currentColor;
  vertical-align: -2px;
}
.svg-icon-small {
  width: 2em;
  height: 2em;
  position: relative;
  fill: currentColor;
  vertical-align: -2px;
}

.svg-icon-default {
  width: 3em;
  height: 3em;
  position: relative;
  fill: currentColor;
  vertical-align: -2px;
}
.svg-icon-medium {
  width: 6em;
  height: 6em;
  position: relative;
  fill: currentColor;
  vertical-align: -2px;
}
.svg-icon-large {
  width: 10em;
  height: 10em;
  position: relative;
  fill: currentColor;
  vertical-align: -2px;
}
</style>